<template>
	<view class="wapper" style="padding: 0upx 30upx">
		<u-navbar :title="$t('contacts.New-Group')" :autoBack="true" bgColor="#F6F6F6" titleStyle="font-weight: 500; color: #000000;">
			<view class="u-right-slot" slot="right">
				<view class="edit-btn" :style="groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim() && submitSelectFriendList.length !== 0 ? 'color: #61BDB2;' : 'opacity: 0.3;pointer-events: none;'" @click="handleDetail">
					{{ $t('index.Create') }}
				</view>
			</view>
		</u-navbar>
		<view class="group-view">
			<image src="@/static/image/camera.png" class="group-image" v-if="!avatar" @click="handleUploadImage" />
			<image :src="avatar" class="group-image" mode="aspectFill" v-else @click="handleUploadImage" />
			<input v-model="groupName" class="input-view" :placeholder="$t('contacts.Group-Name')" maxlength="64"/>
		</view>
		<view class="member-list">
			<view class="item" v-for="(item, index) in submitSelectFriendList" :key="index">
				<image :src="item.userVo.avatarCompress || item.userVo.avatar" class="name-image" v-if="isPeopleAvatarExit(item.userVo.avatarCompress || item.userVo.avatar)" />
				<view class="name-image avator-font-setting" v-else :style="{ background: `${getDefaultColor(item.userVo.avatarColorCode)}`, fontSize: '30upx' }">{{ formatUserName(item).slice(0, 1) }}</view>
				<view class="name">{{ formatUserName(item) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { queryCreateGroup } from '@/services/group.js';
import { mapState, mapMutations, mapActions } from 'vuex';
import { getDefaultColor } from '@/utils/index';
import config from "@/config/app.config";
import store from "@/store/index";
export default {
	data() {
		return {
			groupName: '',
			avatar: null,
			avatarCompress: null,
		};
	},
	computed: {
		...mapState(['submitSelectFriendList'])
	},
	onShow() {
		console.log('hhhhhhhhhhh', this.submitSelectFriendList);
	},
	methods: {
		getDefaultColor,
		...mapActions(['changeGroupList']),

		// 上传头像
    async handleUploadImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ["camera", "album"],
        success: async (res) => {
          console.log(res);
          if (res.tempFiles[0].size > 5 * 1024 * 1024) {
            uni.showToast({
              title: this.$t("dating.picLimit", {value: 5}),
              icon: "none",
            });
            return
          }
          uni.showLoading();
          const result = await this.uploadFilePromise(res.tempFilePaths[0]);
          uni.hideLoading();
          console.log(result);
          this.avatar = result.url
          this.avatarCompress = result.compressImage
        },
      });
    },
    //上传路径
    uploadFilePromise(url) {
      console.log(url);
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          header: {
            Authorization: `Bearer ${store.state.token}`,
            version: config.version,
          },
          formData: {
            user: "upload",
          },
          success: (res) => {
            const resp = JSON.parse(res.data);
            setTimeout(() => {
              resolve(resp.data);
            }, 1000);
          },
        });
      });
    },

		async handleDetail() {
			let memberIds = [];
			this.submitSelectFriendList.forEach(item => {
				memberIds.push(item.userVo.userId);
			});
			const { result } = await queryCreateGroup({
				groupName: this.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim(),
				avatar: this.avatar,
        avatarCompress: this.avatarCompress,
				memberIds: memberIds,
				moduleType:0
			});
			if (result.code === 200) {
				var groupList = this.$store.state.groupList;
				this.changeGroupList([
					...groupList,
					{
						avatar: this.avatar,
						avatarColorCode: 1,
						avatarCompress: this.avatarCompress,
						groupId: result.data,
						groupName: this.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim(),
						groupStatus: 0,
						isDelete: 0,
						isPublic: 1,
						limitNum: 500,
						mute: null,
						remark: null,
						type: 3,
						userId: this.$store.state.userId,
						defaultName: this.groupName.replace(/\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x09|\x0A|\x0B|\x0C|\x0D|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F/g, '').replace('/ㅤ/g', ' ').trim().slice(0, 1),
						showAvatar: this.avatar,
						avatarColorCode: '1',
						defaultColor: getDefaultColor(1)
					}
				]);
				uni.redirectTo({
					url: '/pages/friends/GroupChatList'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.wapper {
	box-sizing: border-box;
	padding: 0upx 30upx;

	.u-right-slot {
		.edit-btn {
			font-size: 28upx;
			font-weight: bold;
			color: #000000;
		}
	}
}

.group-view {
	padding: 32upx 30upx;
	background: #ffffff;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	margin-top: 140upx;

	.group-image {
		width: 136upx;
		height: 136upx;
		border-radius: 50%;
	}

	.input-view {
		margin-left: 52upx;
	}
}

.member-list {
	margin-top: 60upx;
	border-radius: 20upx;
	background: #ffffff;
	width: 100%;

	.item {
		padding: 20upx 30upx;
		display: flex;
		align-items: center;
		border-bottom: 2upx solid #f6f6f6;

		.name-image {
			width: 80upx;
			height: 80upx;
			background: #e8f3f2;
			border-radius: 50%;
		}

		.name {
			font-size: 30upx;
			font-weight: 400;
			color: #000000;
			margin-left: 33upx;
		}
	}
}
</style>
